<template>
  <div class="mod-config">
    <split-pane class="splitPane" :min-percent='50' :default-percent='85' split="vertical">
      <template slot="paneL">
        <el-tabs v-model="activeName" type="card" closable @tab-click="handleClick">
          <el-tab-pane label="合同信息" name="contractInfo">
            <!--       TODO  简单的布局 -->
            <div style="height: 200px;">
              <el-form ref="contractOrderInfo" :model="contractOrderInfo" label-width="80px">
                <el-row :gutter="20">

                  <el-col :span="6">
                    <el-form-item label="合同名称">
                      <el-input v-model="contractOrderInfo.contractNo"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="客户名称">
                      <el-select v-model="contractOrderInfo.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="合同日期">
                      <el-date-picker type="date" placeholder="合同日期" v-model="contractOrderInfo.contractTime"
                                      style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="货期">
                      <el-input v-model="contractOrderInfo.contractNo"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="含税价">
                      <el-radio-group v-model="contractOrderInfo.taxInclusive">
                        <el-radio label="0">不含税</el-radio>
                        <el-radio label="1">含税</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="运输方式">
                      <el-radio-group v-model="contractOrderInfo.transportWay">
                        <el-radio label="0">含运费</el-radio>
                        <el-radio label="1">不含运费</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="结算货币">
                      <el-radio-group v-model="contractOrderInfo.currencyType">
                        <el-radio label="0">人民币（CNY）</el-radio>
                        <el-radio label="1">美元（USD）</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="合同总价">
                      <el-input v-model="contractOrderInfo.totalAmount"></el-input>

                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="备注">
                      <el-input type="textarea" v-model="contractOrderInfo.desc"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="箱唛描述">
                      <el-input type="textarea" v-model="contractOrderInfo.boxPackText"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <!--          订单详情  ------->
            <el-divider content-position="left">订单详情</el-divider>

          </el-tab-pane>
          <el-tab-pane label="开模信息" name="modelInfo">
            开模信息
          </el-tab-pane>
          <el-tab-pane label="打样信息" name="proofingInfo">打样信息</el-tab-pane>
          <el-tab-pane label="询价记录" name="inquiryInfo">询价记录</el-tab-pane>
          <el-tab-pane label="采购信息" name="purchaseInfo">采购信息</el-tab-pane>
          <el-tab-pane label="入库记录" name="putInStorage">入库记录</el-tab-pane>
          <el-tab-pane label="质检记录" name="qualityInfo">质检记录</el-tab-pane>
          <el-tab-pane label="出库记录" name="leaveStorage">出库记录</el-tab-pane>
          <el-tab-pane label="财务记录" name="financeInfo">财务记录</el-tab-pane>
          <el-tab-pane label="退货记录" name="returnInfo">退货记录</el-tab-pane>
          <el-tab-pane label="跟进记录" name="processInfo">跟进记录</el-tab-pane>
        </el-tabs>
      </template>
      <template slot="paneR">
        <el-card class="box-card">
          <div slot="header" style="padding:8px 17px" class="clearfix">
            <span>业务流程时间线</span>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>

      </template>
    </split-pane>

  </div>
</template>


<script>
import tableView from '@/components/tableView'
import basicMixins from '@/utils/commonViewMixins'
import AddOrUpdate from './contractorderinfo-add-or-update'
import ProductInfoAddOrUpdate from '@/views/modules/product/productinfo-add-or-update'
import OrderAddOrUpdate from '@/views/modules/order/orderdetail-add-or-update'
import OrderUpdate from '@/views/modules/order/orderdetail-update'
import ClientInfoAddOrUpdate from '@/views/modules/client/clientinfo-add-or-update'
import ModelInfoAddOrUpdate from '@/views/modules/model/modelinfo-add-or-update'
import {exportHandle} from '@/utils'
import {mRequest} from '@/utils/request'
import SysDictAddOrUpdate from '@/views/modules/sys/sysdict-add-or-update'
import OrderModelAddOrUpdate from '@/views/modules/order/ordermodel-add-or-update'
import CommodityInfoAddOrUpdateOrder from '@/views/modules/commodity/commodityinfo-add-or-update-order'
import BottleCapInfoAddOrUpdate from '@/views/modules/relate/relatebottlecapinfo-add-or-update.vue'
import CenterCoverInfoAddOrUpdate from '@/views/modules/relate/relatecentercoverinfo-add-or-update.vue'
import NeckRingInfoAddOrUpdate from '@/views/modules/relate/relateneckringinfo-add-or-update.vue'
import SprayHeadInfoAddOrUpdate from '@/views/modules/relate/relatesprayheadinfo-add-or-update.vue'

export default {
  mixins: [basicMixins],
  data() {
    return {
      activeName: 'contractInfo',
      activities: [{
        content: '客户确认订单信息',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      },
        {
          content: '合同预付款确认收款',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '采购询价完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '财务审核询价完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '订单开模中',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '订单开模完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '订单打样中',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '订单打样完成',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        },
        {
          content: '预计上机时间',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '生产中',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '成品入库',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '质检完成',
          timestamp: '2018-04-03 20:46'
        },
        {
          content: '合同尾款确认收款',
          timestamp: '2018-04-03 20:46',
          type: 'success'
        },
        {
          content: '出库中',
          timestamp: '2018-04-03 20:46',
          type: 'success'
        },
        {
          content: '出库完成',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }

      ],
      contractOrderInfo: {
        id: '',
        contractType: '',
        clientName: '',
        contractNo: '',
        clientType: '',
        contractTime: '',
        vouchAccount: '',
        realSaleNumber: 0,
        clientPayAmount: '',
        oceanFreight: 0,
        freight: '',
        discountPrice: '',
        totalAmount: '',
        differenceValue: '',
        paymentTotalAmount: '',
        remark: '',
        paidAmount: 0,
        finalPaymentAmount: 10
      },
      tableListData: [],
      orderDataList: [],
      productInfoList: [],
      vouchAccountList: [],
      orderLoading: false,
      orderDialog: false,
      orderVisible: false,
      sysDictVisible: false,
      orderUpdateVisible: false,
      commodityInfoVisible: false,
      contractOrderVisible: false,
      updateContractOrderAmountVisible: false,
      orderStatusList: [
        {value: -1, text: '缺货'},
        {value: 0, text: '待配货'},
        {value: 15, text: '采购中'},
        {value: 17, text: '采购完成'},
        {value: 20, text: '未出货'},
        {value: 50, text: '部分发货'},
        {value: 55, text: '已全出货'},
        {value: 66, text: '已签收'},
        {value: 90, text: '客户退货'},
        {value: 99, text: '订单取消'}
      ],
      clientInfoVisible: false,
      productInfoVisible: false,
      modelInfoVisible: false,
      orderModelVisible: false,
      bottleCapInfoVisible: false,
      centerCoverInfoVisible: false,
      neckRingInfoVisible: false,
      sprayHeadInfoVisible: false,
      sumInfo: {realSaleNumber: 'realSaleNumber', totalAmount: 'totalAmount', freight: 'freight'},

      //  contractUploadPath: 'https://jsonplaceholder.typicode.com/posts/',
      primaryKey: 'id',
      listApiName: 'contractApi/listContractOrderInfoList',
      deleteApiName: 'contractApi/deleteContractOrderInfo',
      saveAuthName: 'contract:contractorderinfo:save',
      deleteAuthName: 'contract:contractorderinfo:delete',
      searchAttrs: {
        productNo: {
          label: '产品名称',
          placeholder: '请输入产品名称'
        },
        clientContractNo: {
          label: '合同编号',
          placeholder: '请输入合同编号'
        },
        orderStatus: {
          label: '订单状态',
          placeholder: '请输入订单状态',
          clearable: true,
          type: 'list',
          list: []
        },
        clientName: {
          label: '客户名称',
          clearable: true,
          placeholder: '请输入客户名称'
        },
        // paymentWay:{
        //   label: '付款状态',
        //   placeholder: '请输入付款状态',
        //   clearable: true,
        //   type: 'list',
        //   list: []
        // },
        createUser: {
          label: '销售',
          clearable: true,
          type: 'autoComplete',
          placeholder: '请选择业务人员',
          querySearchApiName: 'systemApi/listSaleUser'

        },
        dateTimeRange: {
          type: 'date',
          dateType: 'daterange',
          clearable: true
        }
      },
      showAttrs: {
        clientContractNo: {
          label: '合同编号',
          width: 150
        },
        clientName: {label: '客户', width: 120, showAuthName: 'order:unitprice:show'},
        contractTime: {
          label: '订单日期',
          type: 'date',
          width: 95
        },
        commodityName: {
          label: '货号规格',
          width: 170
        },
        realSaleNumber: {
          label: '商品总量'
        },
        totalAmount: {
          label: '总金额',
          type: 'moneyContract',
          currencyType: 'currencyType',
          width: 110
        },
        clientPayAmount: {
          label: '客户已付金额',
          type: 'money',
          width: 110
        },
        differenceValue: {
          label: '差额',
          type: 'numberComparison',
          warningNumberAttr: 'totalAmount',
          residueWeightCount: 'clientPayAmount',
          width: 110
        },
        oceanFreight: {
          label: '海运费'
        },
        orderStatus: {
          label: '订单状态',
          type: 'radio',
          width: 130,
          items: [
            {value: -1, text: '待采购', tagType: 'info'},
            {value: 0, text: '待配货', tagType: 'info'},
            {value: 15, text: '部分采购中', tagType: 'warning'},
            {value: 16, text: '全部采购中', tagType: 'primary'},
            {value: 17, text: '部分采购完成', tagType: 'warning'},
            {value: 18, text: '全部采购完成', tagType: 'success'},
            {value: 19, text: '部分入库中', tagType: 'primary'},
            {value: 20, text: '全部入库完成', tagType: 'success'},
            {value: 50, text: '部分发货', tagType: 'warning'},
            {value: 55, text: '已全发', tagType: 'success'},
            {value: 66, text: '已签收', tagType: 'success'},
            {value: 90, text: '客户退货', tagType: 'danger'},
            {value: 99, text: '订单取消', tagType: 'danger'}
          ]
        },
        // paymentWay:{
        //   label: '付款方式',
        //   type: 'radio',
        //   items: [
        //     {value: 0, text: '已付全款',tagType: 'success'},
        //     {value: 1, text: '已付定金'},
        //     {value: 90, text: '未付款',tagType: 'danger'},
        //   ],
        // },

        deliveryTime: {label: '交付日期', type: 'date', width: 95},
        // purchaseStatus:{
        //   label: '采购状态',
        //   width: 95
        //
        // },
        // putInStorageNumber:{
        //   label: '入库数量',
        //   width: 95
        // },
        salesPerson: {
          label: '销售人员'
        },
        // trackingNo: {
        //   label: '物流单号'
        // },

        // transportWay: {
        //   label: '运输方式',
        //   type: 'radio',
        //   items: [
        //     {value: 0, text: '快递'},
        //     {value: 1, text: '需方自提',tagType:'danger'}
        //   ]
        // },
        remark: {
          label: '备注'
        },
        confirmStatus: {
          label: '金额和数量确认',
          type: 'radio',
          items: [
            {value: 0, text: '待确认', tagType: 'info'},
            {value: 1, text: '已确认', tagType: 'success'},
            {value: 2, text: '确认后又更新', tagType: 'warning'}
          ]
        }
      }
    }
  },
  mounted() {
    this.searchAttrs['orderStatus'].list = [
      {id: -1, name: '缺货'},
      {id: 0, name: '待配货'},
      {id: 15, name: '采购中'},
      {id: 17, name: '采购完成'},
      {id: 20, name: '未出货'},
      {id: 50, name: '部分发货'},
      {id: 55, name: '已全出货'},
      {id: 66, name: '已签收'},
      {id: 90, name: '客户退货'},
      {id: 99, name: '订单取消'}
    ]
    //paymentWay
    // this.searchAttrs['paymentWay'].list = [
    //   {id: 0, name: '已付全款'},
    //   {id: 1, name: '已付定金'},
    //   {id: 2, name: '付尾款'},
    //   {id: 90, name: '未付款'}
    // ]
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },

    open() {
      let _this = this
      this.$confirm('请确认是否更新合同金额和销售数量，并流转至财务往来, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.updateContractOrderByAmountAndRealSaleNumber()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    updateContractOrderByAmountAndRealSaleNumber() {
      this.getDataList()
      mRequest('contractApi/updateContractOrderByAmountAndRealSaleNumber', this.contractOrderInfo, (data) => {
        if (data.data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
        } else {
          this.$message.error(data.data.msg)
        }
        this.getDataList()
        this.updateContractOrderAmountVisible = false
      })
    },

    updateContractOrderDialog(id) {
      this.contractOrderVisible = true
      this.initProductInfoList()
      this.initFinanceAccountInfoList()
      mRequest('contractApi/contractOrderInfoInfo', {id: id}, (res) => {
        this.contractOrderInfo = this.R.pathOr('', ['data', 'contractOrderInfo'], res)


      })
    },
    updateContactOrderListInfo() {
      this.contractOrderVisible = false
      mRequest('contractApi/updateContractAndOrder', this.contractOrderInfo
        , (data) => {
          if (data.data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
          } else {
            this.$message.error(data.data.msg)
          }
          this.getDataList()
          this.deepDialogVisible = false
        })
    },
    addRow(index, rows) {
      rows.push({
        id: '',
        productId: '',
        unitPrice: 0,
        totalPrice: 0,
        orderProductNumber: 0,
        productWeight: 0,
        remark: ''
      })
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    openSysDicDialog(cb) {
      this.sysDictVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.sysDict)) {
          this.$refs.sysDict.init(null, {}, cb)
        }
      })
    },

    deleteCheckFunc(deleteItems) {
      // if (deleteItems.filter(this.R.propEq('contractStatus', 3)).length > 0) {
      //      this.$message.error('由于合同状态不是草稿 ， 不允许删除')
      //      return false
      //    }
      return true
    },
    openCommodityInfoDialog(cb) {
      this.commodityInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.commodityInfo)) {
          this.$refs.commodityInfo.init(null, {}, cb)
        }
      })
    },
    openBottleCapInfoDialog(cb) {
      this.bottleCapInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.relateBottleCapInfo)) {
          this.$refs.relateBottleCapInfo.init(null, {}, cb)
        }
      })
    },
    openCenterCoverInfoDialog(cb) {
      this.centerCoverInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.relateCenterCoverInfo)) {
          this.$refs.relateCenterCoverInfo.init(null, {}, cb)
        }
      })
    },
    openNeckRingInfoDialog(cb) {
      this.neckRingInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.relateNeckRingInfo)) {
          this.$refs.relateNeckRingInfo.init(null, {}, cb)
        }
      })
    },
    openSprayHeadInfoDialog(cb) {
      this.sprayHeadInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.relateSprayHeadInfo)) {
          this.$refs.relateSprayHeadInfo.init(null, {}, cb)
        }
      })
    },


    openModelInfoDialog(cb) {
      this.modelInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.modelInfo)) {
          this.$refs.modelInfo.init(null, {}, cb)
        }
      })
    },
    openProductInfoDialog(clientId, cb) {
      this.productInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.productInfo)) {
          this.$refs.productInfo.init(null, {'clientId': clientId}, cb)
        }
      })
    },
    openProductInfoDialog2(id, cb) {
      this.productInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.productInfo)) {
          this.$refs.productInfo.init(id, {}, cb)
        }
      })
    },
    openOrderDialog(param, cb) {
      this.orderVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.order)) {
          this.$refs.order.init(param.id, param, cb, false)
        }
      })
    },
    openClientInfoDialog(cb) {
      this.clientInfoVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.clientInfo)) {
          this.$refs.clientInfo.init(null, {}, cb)
        }
      })
    },
    openOrderModelDialog(property) {
      this.orderModelVisible = true
      this.$nextTick(() => {
        if (!this.R.isNil(this.$refs.orderModelInfo)) {
          this.$refs.orderModelInfo.init(null, property)
        }
      })
    },
    exportOrderContract(id) {
      exportHandle('contractApi/getWordOrderContractExport', {contractOrderId: id})
    },
    showUpdateOrderDetail(item) {
      this.updateContractOrderAmountVisible = true
      this.contractOrderInfo.id = item.id
      this.contractOrderInfo.clientPayAmount = item.clientPayAmount
      this.contractOrderInfo.totalAmount = item.totalAmount
      //  this.contractOrderInfo.differenceValue = item.differenceValue
      this.contractOrderInfo.realSaleNumber = item.realSaleNumber
      this.contractOrderInfo.clientName = item.clientName
      this.contractOrderInfo.oceanFreight = this.R.propOr(0, 'oceanFreight', item), R.path()
    },
    showOrderDetail(id) {
      this.orderDialog = true
      this.orderLoading = true

      this.$nextTick(() => {
        mRequest('orderApi/getOrderListByContractOrderId', {contractOrderId: id}, (res) => {
          const list = this.R.pathOr([], ['data', 'list'], res)
          this.orderDataList = this.R.map((item) => ({
            id: this.R.propOr(0, 'id', item),
            contractOrderId: this.R.propOr(0, 'contractOrderId', item),
            productNo: this.R.propOr(0, 'productNo', item),
            modelNo: this.R.propOr(0, 'modelNo', item),
            productVolume: this.R.propOr(0, 'productVolume', item) + ' ' + this.R.propOr('', 'volumeScope', item),
            orderProductNumber: this.R.propOr(0, 'orderProductNumber', item),
            productWeight: this.R.propOr(0, 'productWeight', item) + ' ' + this.R.propOr('', 'weightScope', item),
            unitPrice: this.R.propOr(0, 'unitPrice', item),
            status: this.R.propOr(0, 'status', item),
            putInStorageValue: this.R.propOr(0, 'putInStorageValue', item),
            leaveStorageValue: this.R.propOr(0, 'leaveStorageValue', item),
            inventory: this.R.propOr(0, 'putInStorageValue', item) - this.R.propOr(0, 'leaveStorageValue', item)
          }), list)
        })
        this.orderLoading = false
      })
    },
    updateOrderDetail(param) {
      this.orderUpdateVisible = true

      this.$nextTick(() => {
        const cb = (newValue) => {
          mRequest('orderApi/getOrderListByContractOrderId', {contractOrderId: newValue.contractOrderId}, (res) => {
            const list = this.R.pathOr([], ['data', 'list'], res)
            this.orderDataList = this.R.map((item) => ({
              id: this.R.propOr(0, 'id', item),
              productNo: this.R.propOr(0, 'productNo', item),
              modelNo: this.R.propOr('', 'modelNo', item),
              productVolume: this.R.propOr(0, 'productVolume', item) + ' ' + this.R.propOr('', 'volumeScope', item),
              orderProductNumber: this.R.propOr(0, 'orderProductNumber', item),
              productWeight: this.R.propOr(0, 'productWeight', item) + ' ' + this.R.propOr('', 'weightScope', item),
              unitPrice: this.R.propOr(0, 'unitPrice', item),
              status: this.R.propOr(0, 'status', item),
              putInStorageValue: this.R.propOr(0, 'putInStorageValue', item),
              leaveStorageValue: this.R.propOr(0, 'leaveStorageValue', item),
              inventory: this.R.propOr(0, 'putInStorageValue', item) - this.R.propOr(0, 'leaveStorageValue', item)
            }), list)
          })
        }
        if (!this.R.isNil(this.$refs.orderInfoUpdate)) {
          this.$refs.orderInfoUpdate.init(param.id, param, cb)
        }
      })
    },
    initProductInfoList() {
      mRequest('productApi/getProductInfoList', {}, (res) => {
        this.productInfoList = this.R.pathOr([], ['data', 'list'], res)
      })
    },
    initFinanceAccountInfoList() {
      mRequest('financeApi/getFinanceAccountInfoList', {}, (res) => {
        this.vouchAccountList = this.R.pathOr([], ['data', 'list'], res)
      })
    },
    changeOrderStatusFun() {
      const orderStatus = this.contractOrderInfo.orderStatus
      this.contractOrderInfo.tableListData.forEach(item => {
        item.status = orderStatus
      })
    },
    deliveryOrderDetail(id) {
      console.info('id ' + id)
    }
  },
  components: {
    tableView,
    AddOrUpdate,
    SysDictAddOrUpdate,
    OrderModelAddOrUpdate,
    OrderAddOrUpdate,
    ProductInfoAddOrUpdate,
    ClientInfoAddOrUpdate,
    OrderUpdate,
    CommodityInfoAddOrUpdateOrder,
    BottleCapInfoAddOrUpdate,
    CenterCoverInfoAddOrUpdate,
    NeckRingInfoAddOrUpdate,
    SprayHeadInfoAddOrUpdate,
    ModelInfoAddOrUpdate
  }
}
</script>
<style scoped>
.el-card /deep/ .el-card__header {
  padding: 0 20px;
  border-bottom: 1px solid #e6ebf5;
  box-sizing: border-box;
}

.el-card /deep/ .el-card__body {
  height: 1080px;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>
